@import 'node_modules/bootstrap/scss/bootstrap';
@import 'node_modules/bootstrap-social/bootstrap-social.scss';
@import 'node_modules/@fortawesome/fontawesome-free/scss/fontawesome';
@import 'node_modules/@fortawesome/fontawesome-free/scss/brands';
@import 'node_modules/@fortawesome/fontawesome-free/scss/regular';
@import 'node_modules/@fortawesome/fontawesome-free/scss/solid';

// Basic Twitch Button CSS
.btn-twitch {
  background-color: #6441a5;
  color: #fff !important;

  &:hover,
  &:active {
    background-color: #503484;
  }
}

.btn-twitter {
  &:hover,
  &:active {
    color: #fff !important;
  }
}

.btn-twitter {
  color: #fff !important;

  &:hover,
  &:active {
    color: #fff !important;
    background-color: #0f97ea;
  }
}

.btn-google {
  &:hover,
  &:active {
    color: #fff !important;
  }
}

.btn-google {
  color: #fff !important;

  &:hover,
  &:active {
    color: #fff !important;
    background-color: #d93b27;
  }
}

.btn-discord {
  background-color: #5865f2;
  color: #fff !important;

  &:hover,
  &:active {
    background-color: #4752c4;
    color: #fff !important;
  }
}

// Multi-color Google icon for branding compliance
.fa-google {
  background:
    linear-gradient(to bottom left, transparent 49%, #fbbc05 50%) 0 25%/48% 40%,
    linear-gradient(to top left, transparent 49%, #fbbc05 50%) 0 75%/48% 30%,
    linear-gradient(-30deg, transparent 53%, #ea4335 48%),
    linear-gradient(45deg, transparent 46%, #4285f4 48%),
    #34a853;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.btn-google {
  background-color: #000000;
  color: #fff !important;
  border: solid #000000;

  &:hover,
  &:active {
    background-color: #000000;
    color: #fff !important;
    border: solid #000000;
  }
}
